<template>
  <el-aside width="300px">
    <el-row class="tac">
      <el-col :span="12" style="width: 200px">
        <h5>课程分类</h5>
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          active-text-color="red"
          >
          <el-menu-item index="0">
            <span slot="title">全部</span>
          </el-menu-item>
          <el-menu-item index="1">
            <span slot="title">职场提升</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title">编程与开发</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">语言学习</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title">生活兴趣</span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title">设计创意</span>
          </el-menu-item>
          <el-menu-item index="6">
            <span slot="title">职业考试</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </el-aside>
</template>

<script>
    export default {
        name: "IndexMenu",
        data(){
          return {
          cid:'',
          }
        },
        methods:{
          handleSelect (key, keyPath) {
          this.cid = key
          this.$emit('indexSelect')
        }
        }
    }
   
</script>

<style scoped>

</style>
